<template>
  <div class="behavior-container">
    <van-nav-bar
      v-isteacher
      title="操行"
      right-text="添加"
      right-arrow
      fixed
      @click-right="$router.push('/behavior/add')"
    />
    <van-nav-bar v-isstudent title="操行" fixed />

    <div
      v-isstudent
      class="card"
      style="text-align: center; background-color: floralwhite"
    >
      目前剩余操行分数：{{ score }} 分
    </div>

    <van-empty v-if="list.length === 0" description="没有数据"> </van-empty>

    <div class="card" v-for="item in list" :key="item" :title="item.name">
      <div><label>学生姓名: </label>{{ item.studentName }}</div>
      <div><label>班级名称: </label>{{ item.className }}</div>
      <div><label>操行类型: </label>{{ item.type }}</div>
      <div><label>操行规则: </label>{{ item.rule }}</div>
      <div ><label>操行图片: </label>{{ (item.image1 == null && item.image2 == null) ? "无":""}}<img style="width: 50px;border-radius:5px" :src="item.image1"><img style="width: 50px;border-radius:5px" :src="item.image2"></div>
      <div>
        <label>操行分数: </label
        ><span :class="item.score < 0 ? 'red' : 'green'">{{
          item.score < 0 ? item.score : "+" + item.score
        }}</span>
      </div>
      <div><label>操行时间: </label>{{ item.startData }}</div>
      <div><label>操行内容: </label>{{ item.content }}</div>
    </div>

    <van-pagination
      v-model="pageNum"
      :total-items="total"
      :items-per-page="pageSize"
      @change="pageQuery"
    />
  </div>
</template>

<style scoped>
.behavior-container {
  padding-top: 50px;
  padding-bottom: 50px;
}

.bottom-button {
  width: 160px;
  height: 40px;
}

.card {
  border: 1px solid #ccc;
  border-radius: 1em;
  padding: 0.5em 1em;
  margin-bottom: 1em;
}

.red {
  color: red;
}

.green {
  color: green;
}
</style>
<script setup>
import { ref } from "vue";
import request from "@/utils/request";

const list = ref([]);
const score = ref(0);

let pageNum = 1;
let pageSize = 5;
let total = 100;

//pageSize=10&pageNum=1

const onLoad = () => {
  let type = localStorage.getItem("type");
  if (type == "学生") {
    // 异步更新数据
    request
      .post(`/wx/student/records/list?pageNum=${pageNum}&pageSize=${pageSize}`)
      .then((resp) => {
        if (resp.data.code == 0) {
          list.value = resp.data.rows;
          total = resp.data.total;
          // 查询剩余操行分数
          request.post("/wx/student/records/score").then((resp) => {
            if (resp.data.code == 0) {
              score.value = 100 + resp.data.data;
            }
          });
        }
      });
  } else {
    // 异步更新数据
    request
      .post(`/wx/teacher/records/list?pageNum=${pageNum}&pageSize=${pageSize}`)
      .then((resp) => {
        if (resp.data.code == 0) {
          list.value = resp.data.rows;
          total = resp.data.total;
        }
      });
  }
};

onLoad();

function pageQuery(item) {
  pageNum = item;
  onLoad();
}

</script>